<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取class集合</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/common.js" ></script>
<style>
	.abox{height: 30px; color: #fff; padding: 5px;}
	.abox1{background: #008000;}
	.abox2{background: #27A8EF;}
	.abox3{background: #333333;}
	.abox4{background: orange;}
	
	.newclass{height: 150px; background-color: #F41515;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">获取class集合！</h2>
	<div class="wrap-main wrap-index">
		<!--内容写这里-->
		<div id="demo1">
			<div class="abox abox1" id="item1">box1</div>
			<div class="abox abox2">box2</div>
			<div class="abox abox1">box1</div>
			<div class="abox abox3">box3</div>
			<div class="abox abox4">box4</div>
		</div>
	</div>
</div>
<script>
	window.onload = function ()
	{
		var oDiv = document.getElementById("demo1");
		var oLi = oDiv.getElementsByTagName("div");
		var oBox = miaov.common.getByClass("demo1","abox1");
		alert("成功获取class名为：abox1的对象的html。内容：" + oBox[0].innerHTML);
		
		miaov.common.addByClass("item1","newclass");
	}
	
	/*面向过程 
	function getByClass(oParent,sClass)
	{
		var oPar = document.getElementById(oParent);
		var aEle = oPar.getElementsByTagName("*");
		var aResult = [];
		var re = new RegExp('\\b' + sClass + '\\b', 'i');
		
		for(var i=0; i<aEle.length; i++)
		{
			if(re.test(aEle[i].className))
			{
				aResult.push(aEle[i]);
			}
		}
		return aResult;
	}
	
	
	function addByClass(oId,sClass)
	{
		var obj = document.getElementById(oId);
		var obj_class = obj.className;
		var bank = ( obj_class != '') ? " " : '';
		var resClass = obj_class + bank + sClass;
		
		if ( obj_class.indexOf(sClass) != (-1) )
		{
			alert("已经有这个className名了，不能重复添加");
			return;
		}
		else
		{
			obj.className = resClass;	//替换原来的class；
		}
	}*/
	
</script>
</body>
</html>
